<template>
    <CommonContainer title="合同约定">
        <div style="margin-top: 10px">

<!--            <template v-if="form.templateClassification==2">-->
<!--                <el-tabs v-model="activeName">-->
<!--                    <el-tab-pane label="当前约定" name="1">-->
<!--                        <el-form ref="form" :model="form" label-width="80px" label-position="top">-->
<!--                            <el-row :gutter="20">-->
<!--                                <el-col :span="8">-->

<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">逾期还车</span>-->
<!--                                            <e-switch v-model="form.overdue" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="overdueParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                逾期日租金:原日租金-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="form.overdueParam" disabled></el-input>-->
<!--                                                %-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->

<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">异地还车</span>-->
<!--                                            <e-switch v-model="form.offsite" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="offsiteParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                单价:-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="form.offsiteParam" disabled></el-input>-->
<!--                                                元/公里-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">滞纳金</span>-->
<!--                                            <e-switch v-model="form.lateFee" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="lateFeeParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                计费规则:逾期金额的-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="form.lateFeeParam" disabled></el-input>-->
<!--                                                %-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->
<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">超公里费</span>-->
<!--                                            <e-switch v-model="form.overmileageFee" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="overmileageFeeParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                单价:-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="form.overmileageFeeParam" disabled></el-input>-->
<!--                                                元/公里-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <div class="agreedItem" style="height: 228px">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">逾期规则(租金)</span>-->
<!--                                            <e-switch v-model="form.overdueRules" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <div class="agreedContent" style="margin-top: 35px">-->
<!--                                            <el-radio-group v-model="form.overdueRulesType" disabled>-->
<!--                                                <div>-->
<!--                                                    <el-radio :label="1">-->
<!--                                                        <p class="flex-row-center" style="flex-wrap: wrap">-->
<!--                                                            逾期规则:超-->
<!--                                                            <el-input style="width: 80px;margin: 0 8px" v-model.number="form.overdueRulesParam1"-->
<!--                                                                      disabled></el-input>-->
<!--                                                            自然日未付款-->
<!--                                                        </p>-->
<!--                                                    </el-radio>-->
<!--                                                </div>-->
<!--                                                <div>-->
<!--                                                    <el-radio :label="2">-->
<!--                                                        <p class="flex-row-center" style="flex-wrap: wrap">-->
<!--                                                            逾期规则:次期-->
<!--                                                            <el-input style="width: 80px;margin: 0 8px" v-model.number="form.overdueRulesParam2"-->
<!--                                                                      disabled></el-input>-->
<!--                                                            日前未付款-->
<!--                                                        </p>-->
<!--                                                    </el-radio>-->
<!--                                                </div>-->

<!--                                            </el-radio-group>-->


<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                            <el-row :gutter="20">-->
<!--                                <el-col :span="24">-->

<!--                                    <div class="agreedItem" style="height: auto">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">提前还车</span>-->
<!--                                            <e-switch v-model="form.earlyReturn" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <div style="padding-bottom: 20px">-->
<!--                                            <el-table-->
<!--                                                :data="form.earlyReturnRules"-->
<!--                                                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>-->
<!--                                                <template slot="empty">-->
<!--                                                    <el-empty :image-size="50" description="暂无数据"></el-empty>-->
<!--                                                </template>-->
<!--                                                <el-table-column-->
<!--                                                    align="center"-->
<!--                                                    prop="reasonForEarlyReturn"-->
<!--                                                    label="提前还车"-->
<!--                                                    key="reasonForEarlyReturn"-->
<!--                                                    min-width="180">-->
<!--                                                    <template v-slot="{row}">-->
<!--                                                        <el-select v-model="row.reasonForEarlyReturn" placeholder="请选择提前还车原因" disabled>-->
<!--                                                            <el-option v-for="dict in dict.type.reason_for_early_return" :label="dict.label" :value="parseInt(dict.value)"-->
<!--                                                                       :key="dict.value" disabled></el-option>-->
<!--                                                        </el-select>-->
<!--                                                    </template>-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                    align="center"-->
<!--                                                    prop="leaseTerm"-->
<!--                                                    label="已履行租期(月)"-->
<!--                                                    key="leaseTerm"-->
<!--                                                    min-width="180">-->
<!--                                                    <template v-slot="{row}">-->
<!--                                                        <div>-->
<!--                                                            <input-number-range v-model="row.leaseTerm" unit="月" disabled></input-number-range>-->
<!--                                                        </div>-->

<!--                                                    </template>-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                    align="center"-->
<!--                                                    prop="liquidatedDamagesScale"-->
<!--                                                    label="违约金比例"-->
<!--                                                    key="liquidatedDamagesScale"-->
<!--                                                    min-width="180">-->
<!--                                                    <template v-slot="{row}">-->
<!--                                                        <p class="flex-row-center">-->
<!--                                                            剩余未履行租赁期应支付租金总额的-->
<!--                                                            <el-input style="width: 80px;margin: 0 8px" v-model="row.liquidatedDamagesScale" disabled></el-input>-->
<!--                                                            %-->
<!--                                                        </p>-->
<!--                                                    </template>-->
<!--                                                </el-table-column>-->

<!--                                            </el-table>-->

<!--                                        </div>-->
<!--                                    </div>-->

<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                        </el-form>-->
<!--                    </el-tab-pane>-->
<!--                    <el-tab-pane label="原模版约定" name="2">-->
<!--                        <el-form ref="form" :model="oldForm" label-width="80px" label-position="top">-->
<!--                            <el-row :gutter="20">-->
<!--                                <el-col :span="8">-->

<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">逾期还车</span>-->
<!--                                            <e-switch v-model="oldForm.overdue" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="overdueParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                逾期日租金:原日租金-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="oldForm.overdueParam" disabled></el-input>-->
<!--                                                %-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->

<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">异地还车</span>-->
<!--                                            <e-switch v-model="oldForm.offsite" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="offsiteParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                单价:-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="oldForm.offsiteParam" disabled></el-input>-->
<!--                                                元/公里-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">滞纳金</span>-->
<!--                                            <e-switch v-model="oldForm.lateFee" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="lateFeeParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                计费规则:逾期金额的-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="oldForm.lateFeeParam" disabled></el-input>-->
<!--                                                %-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->
<!--                                    <div class="agreedItem">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">超公里费</span>-->
<!--                                            <e-switch v-model="oldForm.overmileageFee" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <el-form-item prop="overmileageFeeParam">-->
<!--                                            <div class="agreedContent flex-row-center">-->
<!--                                                单价:-->
<!--                                                <el-input style="width: 80px;margin: 0 8px" v-model.number="oldForm.overmileageFeeParam" disabled></el-input>-->
<!--                                                元/公里-->
<!--                                            </div>-->
<!--                                        </el-form-item>-->
<!--                                    </div>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <div class="agreedItem" style="height: 228px">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">逾期规则(租金)</span>-->
<!--                                            <e-switch v-model="oldForm.overdueRules" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <div class="agreedContent" style="margin-top: 35px">-->
<!--                                            <el-radio-group v-model="oldForm.overdueRulesType" disabled>-->
<!--                                                <div>-->
<!--                                                    <el-radio :label="1">-->
<!--                                                        <p class="flex-row-center" style="flex-wrap: wrap">-->
<!--                                                            逾期规则:超-->
<!--                                                            <el-input style="width: 80px;margin: 0 8px" v-model.number="oldForm.overdueRulesParam1"-->
<!--                                                                      disabled></el-input>-->
<!--                                                            自然日未付款-->
<!--                                                        </p>-->
<!--                                                    </el-radio>-->
<!--                                                </div>-->
<!--                                                <div>-->
<!--                                                    <el-radio :label="2">-->
<!--                                                        <p class="flex-row-center" style="flex-wrap: wrap">-->
<!--                                                            逾期规则:次期-->
<!--                                                            <el-input style="width: 80px;margin: 0 8px" v-model.number="oldForm.overdueRulesParam2"-->
<!--                                                                      disabled></el-input>-->
<!--                                                            日前未付款-->
<!--                                                        </p>-->
<!--                                                    </el-radio>-->
<!--                                                </div>-->

<!--                                            </el-radio-group>-->


<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                            <el-row :gutter="20">-->
<!--                                <el-col :span="24">-->

<!--                                    <div class="agreedItem" style="height: auto">-->
<!--                                        <p class="titleInfo flex-row-center-sb">-->
<!--                                            <span class="ruleTitle">提前还车</span>-->
<!--                                            <e-switch v-model="oldForm.earlyReturn" disabled></e-switch>-->
<!--                                        </p>-->
<!--                                        <div style="padding-bottom: 20px">-->
<!--                                            <el-table-->
<!--                                                :data="oldForm.earlyReturnRules"-->
<!--                                                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>-->
<!--                                                <template slot="empty">-->
<!--                                                    <el-empty :image-size="50" description="暂无数据"></el-empty>-->
<!--                                                </template>-->
<!--                                                <el-table-column-->
<!--                                                    align="center"-->
<!--                                                    prop="reasonForEarlyReturn"-->
<!--                                                    label="提前还车"-->
<!--                                                    key="reasonForEarlyReturn"-->
<!--                                                    min-width="180">-->
<!--                                                    <template v-slot="{row}">-->
<!--                                                        <el-select v-model="row.reasonForEarlyReturn" placeholder="请选择提前还车原因" disabled>-->
<!--                                                            <el-option v-for="dict in dict.type.reason_for_early_return" :label="dict.label" :value="parseInt(dict.value)"-->
<!--                                                                       :key="dict.value" disabled></el-option>-->
<!--                                                        </el-select>-->
<!--                                                    </template>-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                    align="center"-->
<!--                                                    prop="leaseTerm"-->
<!--                                                    label="已履行租期(月)"-->
<!--                                                    key="leaseTerm"-->
<!--                                                    min-width="180">-->
<!--                                                    <template v-slot="{row}">-->
<!--                                                        <div>-->
<!--                                                            <input-number-range v-model="row.leaseTerm" unit="月" disabled></input-number-range>-->
<!--                                                        </div>-->

<!--                                                    </template>-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                    align="center"-->
<!--                                                    prop="liquidatedDamagesScale"-->
<!--                                                    label="违约金比例"-->
<!--                                                    key="liquidatedDamagesScale"-->
<!--                                                    min-width="180">-->
<!--                                                    <template v-slot="{row}">-->
<!--                                                        <p class="flex-row-center">-->
<!--                                                            剩余未履行租赁期应支付租金总额的-->
<!--                                                            <el-input style="width: 80px;margin: 0 8px" v-model="row.liquidatedDamagesScale" disabled></el-input>-->
<!--                                                            %-->
<!--                                                        </p>-->
<!--                                                    </template>-->
<!--                                                </el-table-column>-->

<!--                                            </el-table>-->

<!--                                        </div>-->
<!--                                    </div>-->

<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                        </el-form>-->
<!--                    </el-tab-pane>-->

<!--                </el-tabs>-->
<!--            </template>-->
            <template>
                <el-form ref="form" :model="form" label-width="80px" label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="8">

                            <div class="agreedItem">
                                <p class="titleInfo flex-row-center-sb">
                                    <span class="ruleTitle">逾期还车</span>
                                    <e-switch v-model="form.overdue" disabled></e-switch>
                                </p>
                                <el-form-item prop="overdueParam">
                                    <div class="agreedContent flex-row-center">
                                        逾期日租金:原日租金
                                        <el-input style="width: 80px;margin: 0 8px" v-model="form.overdueParam" disabled></el-input>
                                        %
                                    </div>
                                </el-form-item>
                            </div>

                            <div class="agreedItem">
                                <p class="titleInfo flex-row-center-sb">
                                    <span class="ruleTitle">异地还车</span>
                                    <e-switch v-model="form.offsite" disabled></e-switch>
                                </p>
                                <el-form-item prop="offsiteParam">
                                    <div class="agreedContent flex-row-center">
                                        单价:
                                        <el-input style="width: 80px;margin: 0 8px" v-model="form.offsiteParam" disabled></el-input>
                                        元/公里
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="agreedItem">
                                <p class="titleInfo flex-row-center-sb">
                                    <span class="ruleTitle">滞纳金</span>
                                    <e-switch v-model="form.lateFee" disabled></e-switch>
                                </p>
                                <el-form-item prop="lateFeeParam">
                                    <div class="agreedContent flex-row-center">
                                        计费规则:逾期金额的
                                        <el-input style="width: 80px;margin: 0 8px" v-model="form.lateFeeParam" disabled></el-input>
                                        %
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="agreedItem">
                                <p class="titleInfo flex-row-center-sb">
                                    <span class="ruleTitle">超公里费</span>
                                    <e-switch v-model="form.overmileageFee" disabled></e-switch>
                                </p>
                                <el-form-item prop="overmileageFeeParam">
                                    <div class="agreedContent flex-row-center">
                                        单价:
                                        <el-input style="width: 80px;margin: 0 8px" v-model="form.overmileageFeeParam" disabled></el-input>
                                        元/公里
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="agreedItem" style="height: 228px">
                                <p class="titleInfo flex-row-center-sb">
                                    <span class="ruleTitle">逾期规则(租金)</span>
                                    <e-switch v-model="form.overdueRules" disabled></e-switch>
                                </p>
                                <div class="agreedContent" style="margin-top: 35px">
                                    <el-radio-group v-model="form.overdueRulesType" disabled>
                                        <div>
                                            <el-radio :label="1">
                                                <p class="flex-row-center"  style="flex-wrap: wrap">
                                                    逾期规则:超
                                                    <el-input style="width: 80px;margin: 0 8px" v-model="form.overdueRulesParam1"
                                                              disabled></el-input>
                                                    自然日未付款
                                                </p>
                                            </el-radio>
                                        </div>
                                        <div>
                                            <el-radio :label="2">
                                                <p class="flex-row-center" style="flex-wrap: wrap">
                                                    逾期规则:次期
                                                    <el-input style="width: 80px;margin: 0 8px" v-model="form.overdueRulesParam2"
                                                              disabled></el-input>
                                                    日前未付款
                                                </p>
                                            </el-radio>
                                        </div>

                                    </el-radio-group>


                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">

                            <div class="agreedItem" style="height: auto">
                                <p class="titleInfo flex-row-center-sb">
                                    <span class="ruleTitle">提前还车</span>
                                    <e-switch v-model="form.earlyReturn" disabled></e-switch>
                                </p>
                                <div style="padding-bottom: 20px">
                                    <el-table
                                        :data="form.earlyReturnRules"
                                        :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                                        <el-table-column
                                            align="center"
                                            prop="reasonForEarlyReturn"
                                            label="提前还车"
                                            key="reasonForEarlyReturn"
                                            min-width="180">
                                            <template v-slot="{row}">
                                                <el-select v-model="row.reasonForEarlyReturn" placeholder="请选择提前还车原因" disabled>
                                                    <el-option v-for="dict in dict.type.reason_for_early_return" :label="dict.label" :value="parseInt(dict.value)"
                                                               :key="dict.value" disabled></el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            align="center"
                                            prop="leaseTerm"
                                            label="已履行租期(月)"
                                            key="leaseTerm"
                                            min-width="180">
                                            <template v-slot="{row}">
                                                <div>
                                                    <input-number-range v-model="row.leaseTerm" unit="月" disabled></input-number-range>
                                                </div>

                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            align="center"
                                            prop="liquidatedDamagesScale"
                                            label="违约金比例"
                                            key="liquidatedDamagesScale"
                                            min-width="180">
                                            <template v-slot="{row}">
                                                <p class="flex-row-center">
                                                    剩余未履行租赁期应支付租金总额的
                                                    <el-input style="width: 80px;margin: 0 8px" v-model="row.liquidatedDamagesScale" disabled></el-input>
                                                    %
                                                </p>
                                            </template>
                                        </el-table-column>

                                    </el-table>

                                </div>
                            </div>

                        </el-col>
                    </el-row>
                </el-form>
            </template>


        </div>
    </CommonContainer>
</template>

<script>
import InputNumberRange from "@/components/InputNumberRange/index.vue";

export default {
    dicts: ['reason_for_early_return'],
    components: {InputNumberRange},
    props: {
        form: {
            type: Object,
            default: {}
        }
    },
    computed:{
      oldForm(){
          let oldForm = null
          if (this.form.companyStandardTemplateVo){
              oldForm = this.form.companyStandardTemplateVo
              if (oldForm.overdueRulesParam) {
                  if (oldForm.overdueRulesType == 1) {
                      this.$set(oldForm, 'overdueRulesParam1', oldForm.overdueRulesParam)
                  } else if (oldForm.overdueRulesType == 2) {
                      this.$set(oldForm, 'overdueRulesParam2', oldForm.overdueRulesParam)
                  }
              }else {
                  this.$set(this.form, 'overdueRulesParam1', null)
                  this.$set(this.form, 'overdueRulesParam2', null)
              }
              if (oldForm.earlyReturnRules && oldForm.earlyReturnRules.length > 0) {
                  oldForm.earlyReturnRules = oldForm.earlyReturnRules.map(item => {
                      this.$set(item, 'leaseTerm', [item.minLeaseTerm, item.maxLeaseTerm])
                      return item
                  })
              }
          }
          return oldForm
      }
    },
    data() {
        return {
            activeName:'1'
        }
    },
    methods: {},
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
.agreedItem {
    padding: 8px 20px;
    border-radius: 6px;
    border: 1px solid #DADADA;
    margin-bottom: 16px;
    height: 106px;
    font-size: 14px;
    color: #333333;

    .titleInfo {
        .ruleTitle {
            font-weight: bold;

            //&::before {
            //    content: '*';
            //    color: #F5222D;
            //    position: relative;
            //    top: 2px;
            //    margin-right: 4px;
            //}
        }
    }

    .agreedContent {
        //margin-top: 15px;
    }
}

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    //margin-bottom: 15px;
    //width: 70%;
}

::v-deep .el-radio {
    color: #606266;
    font-weight: 500;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: 14px;
    margin-right: 30px;
    -moz-user-select: none;
    -webkit-user-select: none;
    display: flex;
}

::v-deep .el-radio__label {
    font-size: 14px;
    padding-left: 10px;
    position: relative;
    top: -23px;
}
</style>
